<template>
   <div class="classification_nav" @mouseleave="leaveNave">
            <div class="left" @mousemove="mouseMove" ref="leftRef" @mouseleave="mouseLeaveLeft" @mouseenter="mouseEnterLeft">
                <div :class="{ r_classification_hover: activeClassification.activeClassification.id == classification.id,r_classification:true }" v-for="classification in classifications.classifications" :key="classification.id" @mouseenter="classificationActive(classification)">
                    {{classification.name}}
                </div>
            </div>
            <div class="right" v-show="showRightRef" ref="rightRef" @mouseenter="mouseEnterRight" @mouseleave="mouseLeaveRight">
                <div class="right_row" v-for="classification in activeClassification.activeClassification.children" :key="classification.id">
                    <div class="sub_classifications">{{classification.name + "  >"}}</div>
                    <div class="third_classifications">
                        <div class="classification" v-for="subClassification in (classification.children ? classification.children.slice(0 , 2):[])" :key="subClassification.id">{{subClassification.name}}</div>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
import api from '@/service/api.js'
import { reactive, ref } from 'vue'
export default {
  setup (props, context) {
    var timer = null
    // 记录鼠标位置
    const mouseTrack = []
    // 鼠标否进入左边
    const isEnterLeft = ref(false)
    // 鼠标否进入右边
    const isEnterRight = ref(false)
    // 鼠标是否展示右边
    const showRightRef = ref(false)
    const leftRef = ref(null)
    const rightRef = ref(null)
    // 分类列表
    const classifications = reactive({
      classifications: []
    })

    const activeClassification = reactive({
      activeClassification: {}
    })

    api.classificationList().then((res) => {
      console.log(res)
      classifications.classifications = res
    })

    // 鼠标选中左边的分类
    function classificationActive (classification) {
      const curMouse = mouseTrack[mouseTrack.length - 1] // 鼠标当前坐标
      const prevMouse = mouseTrack[mouseTrack.length - 2] // 鼠标上一次坐标

      if (needDelay(rightRef.value, curMouse, prevMouse)) {
        // 延迟切换
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          if (isEnterRight.value) {
            return
          }
          activeClassification.activeClassification = classification
          showRightRef.value = true
          timer = null
        }, 300)
      } else {
        // 马上切换
        activeClassification.activeClassification = classification
        showRightRef.value = true
      }
    }
    /**
     * 是否需要延迟
     * 当当前坐标在 鼠标上一次坐标和left框右上和右下之间的三角形里面 则延迟 否则马上切换菜单
     */
    function needDelay (ele, curMouse, prevMouse) {
      if (!curMouse || !prevMouse) {
        return false
      }
      // 右上点
      var topRight = {
        x: leftRef.value.getBoundingClientRect().left + leftRef.value.getBoundingClientRect().width,
        y: leftRef.value.getBoundingClientRect().top + 0
      }
      // 右下点
      var bottomRight = {
        x: leftRef.value.getBoundingClientRect().left + leftRef.value.getBoundingClientRect().width,
        y: leftRef.value.getBoundingClientRect().top + ele.clientHeight
      }
      const res = IsPointInTriangle(curMouse, topRight, bottomRight, prevMouse)
      console.log(res)
      return res
    }
    /**
     *  假设三角形的三个点按照顺时针（或者逆时针）顺序是A,B,C。对于某一点P，求出三个向量PA,PB,PC, 然后计算以下三个叉乘（^表示叉乘符号）：
     *
     *   t1 = PA^PB,
     *
     *   t2 = PB^PC,
     *
     *   t3 = PC^PA,
     *
     *   如果t1，t2，t3同号（同正或同负），那么P在三角形内部，否则在外部。
     */
    function IsPointInTriangle (p, a, b, c) {
      var pa = vector(p, a)
      var pb = vector(p, b)
      var pc = vector(p, c)

      var t1 = vectorPro(pa, pb)
      var t2 = vectorPro(pb, pc)
      var t3 = vectorPro(pc, pa)
      return sameSign(t1, t2) && sameSign(t2, t3)
    }

    // 向量是终点坐标减去起点坐标
    function vector (a, b) {
      return {
        x: b.x - a.x,
        y: b.y - a.y
      }
    }
    // 向量的叉乘
    function vectorPro (v1, v2) {
      return v1.x * v2.y - v1.y * v2.x
    }

    // 用位运算高效判断符号相同
    function sameSign (a, b) {
      return (a ^ b) >= 0
    }

    function mouseEnterRight () {
      isEnterRight.value = true
    }
    function mouseLeaveRight () {
      isEnterRight.value = false
    }
    function mouseEnterLeft () {
      isEnterLeft.value = true
    }
    function mouseLeaveLeft () {
      isEnterLeft.value = false
      mouseTrack.splice(0, mouseTrack.length)
    }

    // function hideRight () {
    //   setTimeout(() => {
    //     if (!isEnterRight.value && !isEnterLeft.value) {
    //       showRightRef.value = false
    //     }
    //   }, 100)
    // }
    function mouseMove (e) {
      mouseTrack.push({
        x: e.pageX,
        y: e.pageY
      })
      if (mouseTrack.length > 3) {
        mouseTrack.shift()
      }
    }
    function leaveNave () {
      showRightRef.value = false
      activeClassification.activeClassification = {}
    }
    return {
      classifications,
      classificationActive,
      mouseMove,
      showRightRef,
      activeClassification,
      mouseLeaveLeft,
      mouseEnterLeft,
      mouseLeaveRight,
      leftRef,
      rightRef,
      mouseEnterRight,
      leaveNave
    }
  }
}
</script>

<style lang="scss">
    .classification_nav{
        width:300px;
        display: flex;
        justify-content: flex-start;
        position:relative;
        background-color: rgb(70, 70, 70);
        .left{
            cursor: pointer;
            width:300px;
            height:800px;
            .r_classification{
              height: 50px;
              line-height: 50px;
              color:white;
              text-align: left;
              padding-left: 10px;
            }
            .r_classification_hover{
              background-color:rgb(117, 117, 117);
            }
        }
        .right{
            position:absolute;
            top:0;
            left:100%;
            width:800px;
            height:800px;
            display: flex;
            flex-direction:column;
            justify-content: flex-start;
            background-color: #fff;
            box-shadow: 2px 0 5px rgba(0,0,0,.3);
            .right_row{
              display: flex;
              flex-direction:row;
              height: 50px;
              line-height: 50px;
              font-size: 12px;
              padding: 10px 0 0 20px;
              .sub_classifications{
                    width: 70px;
                    text-align: right;
                    font-weight: 700;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    cursor: pointer;
              }
              .third_classifications{
                    display: flex;
                    flex-direction:row;
                    .classification{
                        text-align: left;
                        text-overflow: ellipsis;
                        padding: 0 7px;
                        cursor: pointer;
                  }
              }
            }
        }
    }
</style>
